<template>
<div class="product-list-main">

    <h1>商品列表页</h1>
    <el-card class="card">
        <div slot="header" class="header">查询</div>
        <div>
            <!-- 查询内容 -->
            <el-form ref="search" :model="search" label-width="80px">

                <el-row :gutter="10">

                    <!-- 根据商品名称查询数据 -->
                    <el-col :span="8">
                        <el-form-item label="商品名字">
                        <el-input v-model="search.name" placeholder="请输入查询名字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品编号">
                        <el-input v-model="search.id" placeholder="商品编号查询"></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- 根据的是品牌id查询的数据 -->
                    <el-col :span="8">
                        <el-form-item label="品牌">
                            <!-- lable是显示的名字啊 -->
                        <el-select v-model="search.brandId" @change="selectName" placeholder="品牌类型查询">
                            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        </el-form-item>
                       
                    </el-col>

                </el-row>

                <el-row :gutter="10" class="b-row">
                     <!-- 根据商品是否发布查询 publishStatus -->
                    <el-col :span="8">
                        <el-form-item label="是否发布">
                           <el-select v-model="search.publishStatus" placeholder="是否发布" @change="selectpublishStatus">
                            <el-option v-for="item in publishStatusList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        </el-form-item>
                        
                    </el-col>

                    <!-- 根据商品是否审核插叙 verifyStatus -->
                      <el-col :span="8">
                          <el-form-item label="是否审核">
                              <el-select v-model="search.verifyStatus" placeholder="是否审核" @change="selectverifyStatus">
                            <el-option v-for="item in verifyStatusList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                          </el-form-item>
                        
                    </el-col>
                 
                     <el-col :span="8" style="text-align:center;">
                        <el-button type="primary" @click="doSearch">查询</el-button>
                    </el-col>
                </el-row>

            </el-form>

        </div>
    </el-card>

    <!-- 内容区 -->
    <el-card class="content">
        <el-button slot="header" type="primary" @click="goAddProduct">新增商品</el-button>
        <div>
            <!-- table表单内容 -->
            <el-table :data="productList" style="width: 100%"  class="product-header" v-loading="loading" element-loading-text="别着急哈……☹">

                <el-table-column  label="序号" type="index" width="90" align="center">
                </el-table-column>
                <el-table-column property="brandName" align="center" label="名称/品牌" width="160" class="names">
                    <template slot-scope="scope">
                        <div class="brandName">名称:{{scope.row.brandName}}</div>
                        <div class="name">品牌:{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="图片" width="140" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.pic" alt="sorry" class="img">
                    </template>
                </el-table-column>

                <el-table-column prop="productCategoryName" label="分类名称" align="center" sortable width="100">
                </el-table-column>

                <!-- 使用自定义插槽放多个吧 -->
                <el-table-column label="价格" width="150" sortable align="center">
                    <template slot-scope="scope">
                        <div class="price">现价：￥{{scope.row.price}}元</div>
                        <div class="originalPrice">原价：￥{{scope.row.originalPrice}}元</div>
                    </template>
                </el-table-column>

                <!-- 编辑sku -->
                <el-table-column width="120" align="center"
                  
                    label="编辑SKu" >
                    <template slot-scope="scope">
                         <el-link icon="el-icon-edit" :underline="false" @click="goEditSKu(scope.row.id)" style="color:blue;">编辑Sku</el-link>
                        
                    </template>
                </el-table-column>

                <!-- switch  publishStatus 上架状态、 verifyStatus 审核状态-->
                <el-table-column label="上架/审核" width="150" align="center">
                    <template slot-scope="scope">
                        <div class="slots">
                            <span>上架:</span>
                            <el-switch v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0" @change="goChangepublishStatus(scope.row.publishStatus,scope.row.id)"></el-switch>
                        </div>
                        <div class="slots">
                            <span>审核:</span>
                            <el-switch v-model="scope.row.verifyStatus" :active-value="1" :inactive-value="0" active-color="#13ce66" @change="goChangeverifyStatus(scope.row.verifyStatus,scope.row.id)"></el-switch>
                        </div>
                    </template>
                </el-table-column>
                <!-- newStatus 是否新品 recommendStatus 是否推荐 previewStatus 是否预告-->

                <el-table-column label="新品/推荐" width="150" align="center">
                    <template slot-scope="scope">
                        <div class="slots">
                            <span>新品:</span>
                            <el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0" active-color="#13ce66" @change="goChangenewStatus(scope.row.newStatus,scope.row.id)"></el-switch>
                        </div>
                        <div class="slots">
                            <span>推荐:</span>
                            <el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0" @change="goChangerecommendStatus(scope.row.recommendStatus,scope.row.id)"></el-switch>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否预告" width="150" align="center">
                    <template slot-scope="scope">
                        <div class="slots">
                            <span>预告:</span>
                            <el-switch v-model="scope.row.previewStatus" :active-value="1" :inactive-value="0" @change="goChangepreviewStatus(scope.row.previewStatus,scope.row.id)"></el-switch>
                        </div>

                    </template>
                </el-table-column>

                <el-table-column label="库存" prop="stock" width="90" sortable align="center">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="220" class="btns">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                        <el-button type="primary" icon="el-icon-edit" circle @click="goEditProduct(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelProduct(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器内容 -->
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
            </el-pagination>

        </div>
    </el-card>
    <!-- 编辑SKu的弹窗 应该用父到子传递数据  子组件---》父组件是使用emit方法 也可以通过为父组件添加ref直接修改子组件中的值-->
   <!-- 

       组件引入的时候就初始化了，此时编辑sku组件中的id还未传递过去所以这个组件应该使用v-if判断
    -->
    <!--  -->
    <EditSku v-show="productId" :dialogVisible="parentDialog" :productId="productId" @closeDialog='childCloseDialog' ></EditSku>
</div>
</template>

<script>
import EditSku from '@/views/product/component/EditSku'

import {
    productsByPage,
    switchPublishStatus,
    switchNewStatus,
    switchPreviewStatus,
    switchRecommandStatus,
    switchVerifyStatus,
    del
} from '@/api/product/index'

import {
    findAllBrand
} from '@/api/product/brand/index'
export default {
    name: 'ProductList',
    components: {
        EditSku

    },
    data() {
        return {
            // 查询
            search: {},
            productList: [],
            // 分页器内容
            page: {
                limit: 10, //每一页数量
                sizes: [10, 20, 30, 40],
                totalCount: 40, //总页数
                start: 1 //当前页码
            },
            // 品牌列表
            brandList: [],

            // 是否发布列表状态
            publishStatusList: [{
                    name: '发布',
                    id: 1
                },
                {
                    name: '未发布',
                    id: 0
                }
            ],
            verifyStatusList:[
                {
                    name: '已审核',
                    id: 1
                },
                {
                    name: '未审核',
                    id: 0
                }
            ],
            // 父组件向子组件传递数据利用props
            parentDialog:false,
            productId:'',
            loading:true

        };
    },
    computed: {

    },
    created() {
        this.init()

        // 获取品牌列表
        this.getBrand()

    },
    mounted() {

    },
    methods: {
        init() {
            // 查询参数的变化
            var params = {}
            for (var key in this.search) {

                if (this.search[key]) {
                    params[key] = this.search[key]
                }
            }
            console.log(params);
            productsByPage(this.page.start, this.page.limit, params).then(res => {
                console.log(res);
                if (res.success) {
                this.loading=false

                    this.productList = res.data.rows
                    this.page.totalCount = res.data.total

                }
            })
        },
        getBrand() {
            findAllBrand().then(res => {
                console.log(res);
                this.brandList = res.data.items
            })

        },
        // 品牌列表选中的名字
        selectName(val) {
            console.log(val);

            // 更改search中的名字应该
        },
        // 选择是否发布
        selectpublishStatus(val) {
            console.log(val);
        },
        // 选择是否审核
        selectverifyStatus(val){
            console.log(val);

        },

        // 查询商品
        doSearch() {
            console.log(this.search);
            // 更新下列表即可
            this.init()
        },
        // 分页器内容
        handleSizeChange(val) {
            this.page.sizes = val;
            this.init()
        },
        handleCurrentChange(val) {
            this.page.start = val
            this.init()
        },
        // 查看
        handleClick(val) {

        },
        // 编辑商品
        goEditProduct(id) {
            // console.log(id);
            this.$router.push({
                name:'productListEdit',
                query:{id:id}
                })

        },
        // 删除商品
        goDelProduct(id) {
            this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del(id).then(res => {
                    console.log(res)
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.init()
                    } else {
                        this.$message.error('删除失败!')
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 添加商品
        goAddProduct() {
            this.$router.push({
                name:'productListEdit'
            })

        },
        // 更改成功后的提示
        tipsSucess(tip) {
            this.$message.success(`成功修改${tip}状态`)
        },
        tipError(tip) {
            this.$message.error(`修改${tip}状态失败`)
        },
        // 更改商品发布状态
        goChangepublishStatus(val, id) {
            console.log(val, id);
            switchPublishStatus({
                productId: id,
                status: val
            }).then(res => {
                console.log(res);
                if (res.success) {
                    this.tipsSucess('商品发布')
                } else {
                    this.tipError('商品发布')
                }
            })

        },
        // 更改审核状态
        goChangeverifyStatus(val, id) {
            switchVerifyStatus({
                productId: id,
                status: val
            }).then(res => {
                console.log(res);
                if (res.success) {
                    this.tipsSucess('审核')
                } else {
                    this.tipError('审核')
                }
            })

        },
        // 更改是否新品状态
        goChangenewStatus(val, id) {
            switchNewStatus({
                productId: id,
                status: val
            }).then(res => {
                console.log(res);
                if (res.success) {
                    this.tipsSucess('是否新品')
                } else {
                    this.tipError('是否新品')
                }
            })
        },
        // 更改是否推荐状态
        goChangerecommendStatus(val, id) {
            switchRecommandStatus({
                productId: id,
                status: val
            }).then(res => {
                console.log(res);
                if (res.success) {
                    this.tipsSucess('是否推荐')
                } else {
                    this.tipError('是否推荐')
                }
            })
        },
        // 更改是否预告
        goChangepreviewStatus(val, id) {
            switchPreviewStatus({
                productId: id,
                status: val
            }).then(res => {
                console.log(res);
                if (res.success) {
                    this.tipsSucess('是否预告')
                } else {
                    this.tipError('是否预告')
                }
            })
        },
        // 编辑商品的SKu--将参数传递到组件内
        goEditSKu(id){
            // console.log(id);
            this.parentDialog=true
            // 传递商品id
            this.productId=id

        },
        // 关闭弹窗
        childCloseDialog(val){
            this.parentDialog=val
        }

    },
};
</script>

<style lang="scss" scoped>
// w文字溢出显示

@mixin cent {
    overflow: hidden;
    text-overflow: hidden;
    white-space: nowrap;
}

.card {
    margin: 30px;
    .header{
        font-weight: bolder;
        color: #26A65B;
        font-size: 20px;
    }
    // 底部的搜索条件
    .b-row{
        margin-top: 20px;
    }

}

// 内容区
.content {
    margin: 30px;
    .editsku{
        color: rgb(51, 51, 248);
    }

    .brandName {
        font-weight: bolder;
        color: rebeccapurple;
        @include cent;

    }

    .name {
        @include cent;
    }

    // 价格
    .price {
        color: #F56C6C;
        font-size: 12px;
    }

    .originalPrice {
        text-decoration: line-through;
        font-size: 12px;
        font-style: italic;

    }

    .img {
        width: 120px;
        height: 120px;
    }

    // 自定义插槽的switch开关
    .slots {
        display: flex;
        margin-top: 5px;
    }
}
</style>
